<template>
	<div>

		<!--<div class="weui_search_bar" :class="{weui_search_focusing:isFocus}">
	      <div class="weui_search_outer">
	        <div class="weui_search_inner">
	          <i class="ion ion-ios-search"></i>
	          <input type="text" class="weui_search_input" name="searchParam" ref="searchInput" placeholder="搜索" required=""
	                 @blur="searchBlur" @keyup="searchUp">
	          <a href="javascript:" class="ion ion-ios-close" id="search_clear" @click="searchClear"></a>
	        </div>
	        <label for="search_input" class="weui_search_text" @click='searchInit'>
	          <i class="ion ion-ios-search"></i>
	          <span>搜索</span>
	        </label>
	      </div>
	      <a href="javascript:" class="weui_search_cancel" @click="searchCancel">取消</a>
	    </div>-->
		
		<div class="totleandok clearFix">
	        <!-- <p v-if="$parent.chooseOnly == 1">共选择 {{totlePersion}} 人</p> -->
	         <button type="button" @click="backParent">返回</button>
	        <button type="button" class="shureok" @click="chooseOk">确定</button>
	      </div>

		<div class="roadblack">
			<p>
				<span :class="{active:menu.isTrue}" v-for="menu in menuList" @click="chooseRisk(menu)">{{menu.name}}</span>
			</p>
		</div>

		<!-- title -->
	    <div class="userlist-cont">
	        <div class="user_list">
	          <ul>
	            <li v-for="(item,index) in riskList" @click="addStatus($event, item, index)" :id="item.id">
	              <span>{{item.riskCategorisation}}</span>
	               <i class="ion ion-ios-checkmark"></i>
	            </li>
	          </ul>
	        </div>
	    </div>
	    <loading v-if="loadShow"></loading>
	    <toast v-if="toastShow" :message="tipMessage"></toast>
	  </div>
	</div>
</template>
<script type="text/javascript">

	import safeUrl from '../../assets/js/insterface'
	import http from '../../assets/js/http_mixin'

	export default {
		data() {
			return {
				isFocus: false,
				riskList:[],
				chooseObj:{},
				menuList:[
					{
						name:'城市道路黑点',
						type:'01',
						isTrue:true
					},{
						name:'乡镇道路黑点',
						type:'02',
						isTrue:false
					},{
						name:'高速公路黑点',
						type:'03',
						isTrue:false
					}
				],
			}
		},
		mounted() {
			this.getData('01');
		},
		mixins:[http],
		methods:{
			getData(param){
				const vue = this;
				this.getInfo({
		  	    	url:safeUrl.jraTypeData,
		  	    	param:{'dataKey': param},
		  	    	success(response){
		  	    		if(response.data.type == "2"){
		  	    			this.riskList = response.data.JraData;
		  	    			setTimeout(()=>{
		  	    				this.checkChoose();
		  	    			},10)
		  	    		}
		  	    		// console.log(response.data.JraData)
		  	    	}
		  	    })
			},
			checkChoose() {
				// debugger;
				var liChecked = document.getElementsByTagName("li");
		        for (var i = 0; i < liChecked.length; i++) {
		        	liChecked[i].setAttribute('class', '');
		            if (this.chooseObj && this.chooseObj.id == liChecked[i].getAttribute("id")) {
		              liChecked[i].setAttribute('class', 'checked')
		            }
		        }
			},
			addStatus(e,item,index) {
				if (e.currentTarget.getAttribute('class') == 'checked') {
		            e.currentTarget.setAttribute('class', '');
		            this.chooseObj = {};
		        } else {
		        	var liArr = document.getElementsByTagName("li");
		            for (var k = 0; k < liArr.length; k++) {
		              liArr[k].setAttribute('class', '');
		            }
		            e.currentTarget.setAttribute('class', 'checked');
		            this.chooseObj = item;
		        }
		        console.log(this.chooseObj)	
			},
		    chooseRisk(menu){
		    	for(let i=0; i<this.menuList.length; i++){
		    		this.menuList[i].isTrue = false;
		    	}
		  	    menu.isTrue = true;
		  	    this.getData(menu.type);
		    },	
		    backParent() {
		  	  this.$parent.riskShow = false;
		    },
		    chooseOk() {
		      if(this.chooseObj.id){
		      	 this.$parent.list.baseInfo = this.chooseObj;
		      }else{
		      	this.toastShow = true;
	            this.tipMessage = '请至少选择一条数据';
	            setTimeout(()=>{
	                this.toastShow = false;
	            },1500);
	            return ;
		      }
		  	  this.$parent.riskShow = false;
		    },
		    searchUp() {
	          // this.userList = [];
	          // this.count = 0;
	          // this.getUserList();
            },
	      searchInit() {
	        this.isFocus = true;
	        let searchInput = this.$refs.searchInput;
	        searchInput.focus();
	      },
	      searchCancel(){
	        let searchInput = this.$refs.searchInput;
	        searchInput.value = '';
	        this.isFocus=false;
	        // this.userList = [];
	        // this.count = 0;
	        // this.getUserList();
	        
	      },
	      searchBlur(){
	        let searchInput = this.$refs.searchInput;
	        this.isFocus = true;

	        //this.getSafetyLoopData();

	      },
	      searchClear(){
	        // this.userList = [];
	        // this.count = 0;
	        let searchInput = this.$refs.searchInput;
	        searchInput.value = '';
	        // this.getUserList();
	        //this.getSafetyLoopData();

	      }
		}
	}
</script>